<template>
  <div class="depart-tree">
    <a-spin tip="Loading..." :spinning="false" v-show="toggle">
      <a-input-search v-model="searchValue" style="margin-bottom: 1px" placeholder="请输入部门名称按回车进行搜索" @blur="getXzqh()" />
      <slot></slot>
      <a-tree v-if="visible" class="my-depart-tree" v-model="checkedKeys" selectable @select="onSelect"
        :treeData="treeData" :load-data="onLoadData" :replaceFields="{ children: 'children', title: 'name', key: 'code' }">
      </a-tree>
    </a-spin>
    <!-- <div class="menu-fold" :style="!toggle?{top:'0'}:''">
      <a-tooltip v-model="visible" placement="top" :title="toggle?'收起':'展开'">
        <a-icon :type="toggle?'menu-fold':'menu-unfold'" @click="setToggle" />
      </a-tooltip>
    </div> -->
  </div>
</template>

<script>
import {
  Empty
} from 'ant-design-vue';
import {
  getXzqhByCode,
  getXzqhList,
  getSearchXzqh
} from '@/api/api'
export default {
  name: 'departTree',
  data() {
    return {
      treeData: [],
      autoExpandParent: true,
      expandedKeys: [],
      dataList: [],
      checkedKeys: [],
      checkedRows: [],
      searchValue: "",
      checkStrictly: true,
      toggle: true,
      visible: true,
      psychologList: [],
      treeMap: {

      }
    }
  },
  created() {
    this.getXzqh()

  },
  watch: {

  },
  computed: {

  },
  methods: {
    getXzqh() {
      this.visible = false
      if (this.searchValue) {
        getSearchXzqh({ areaName: this.searchValue }).then(res => {
          if (res.success) {
            const { result } = res
            this.treeData = res.result.records
            // this.setTreeMap(res.result)
            this.visible = true
          }
        })
      } else {
        getXzqhByCode({
          codeList: [460000000000]
        }).then((res) => {
          if (res.success) {
            const { result } = res
            this.treeData = res.result
            this.setTreeMap(res.result)
            this.visible = true
            // this.checkedKeys = [460000000000]
            // console.log("11111111111")
            // console.log(this.treeData)
          }
        })
      }

    },
    setTreeMap(list) {
      list.map(item => {
        this.treeMap[item.code] = item
      })
    },
    onLoadData(treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        getXzqhList({
          level: treeNode.dataRef.level + 1,
          parent: treeNode.dataRef.code
        }).then(async (res) => {
          if (res.success) {
            treeNode.dataRef.children = res.result
            this.setTreeMap(res.result)
            this.treeData = [...this.treeData];
            console.log(this.treeData)
            resolve()
          }
        })
      });
    },
    onCheck() { },
    getSelect() {
      console.log(this.checkedKeys)
      return this.checkedKeys
    },
    onSelect(key, {
      node
    }) {
      const selectedInfo = this.getSelectedTree(node.dataRef)
      this.$emit('select', {
        code: node.dataRef.code,
        treeCode: selectedInfo.code.toString(),
        treeName: selectedInfo.name.toString(),
      })
    },
    getSelectedTree(node, obj = { name: [], code: [] }) {
      obj.name.unshift(node.name)
      obj.code.unshift(node.code)
      let result = obj
      if (node.pcode !== 0) {
        result = this.getSelectedTree(this.treeMap[node.pcode], result)
      }
      return result
    }
  }
}
</script>
<style lang="less" scoped>
.depart-tree {
  padding-bottom: 10px;
  min-height: 600px;
  margin: 6px;
  position: relative;

  .menu-fold {
    position: absolute;
    top: 42px;
    right: 4px;
  }

  // 限制部门选择树高度，避免部门太多时点击确定不便
  .my-depart-tree {
    height: calc(100vh - 120px);
    overflow-y: auto;
  }
}
</style>
